import React, { PropTypes } from 'react';
import ReactNative, { Text, View, StyleSheet, Platform, PixelRatio, WebView, ToastAndroid, BackAndroid, ActivityIndicator,TouchableNativeFeedback,TouchableOpacity } from 'react-native';
import px2dp from '../util/px2dp';
import Theme from '../config/Theme';
// import Icon from 'react-native-vector-icons/MaterialIcons';
import Back from '../component/Back';
import NavigationBar from 'react-native-navbar';
import ImageButton from '../component/ImageButtonWithText';
import Icon from 'react-native-vector-icons/Ionicons';

export default class WebViewPage extends Back {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    render() {
        const data = this.props.rowData;
        const titleConfig = {
            title: '提款机',
            tintColor: 'white'
        };

        return (
            <View style={{ flex: 1 }}>
                <NavigationBar style={{ backgroundColor: Theme.actionBar.backgroundColor }}
                    title={titleConfig}
                    leftButton={<ImageButton
                        color="white"
                        icon="ios-arrow-round-back"
                        imgSize={40}
                        onPress={() => {
                            this._handleBack()
                        }}
                        btnStyle={{ width: 50 }}
                    />}
                    rightButton={<ImageButton
                        color="white"
                        icon="md-share"
                        imgSize={20}
                        onPress={() => {
                        }}
                        btnStyle={{ width: 50 }}
                    />}
                />
                <WebView
                    source={{ uri: data.url }}
                    style={styles.webView}
                    renderLoading={this._renderLoading.bind(this)}
                    startInLoadingState={true}
                    onLoad={this._showTips.bind(this, '载入完成！')}
                    onError={this._showTips.bind(this, '载入失败！')}
                />
                <View style={{ backgroundColor: 'gainsboro', height: 50, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingLeft: 25, paddingRight: 25 }}>
                    <Text style={{ fontSize: 12 }}>转发赚钱规则>></Text>
                    {Platform.OS === 'ios' ?
                        <TouchableOpacity>
                            <View style={{ width: 100, height: 40, backgroundColor: 'dodgerblue', borderRadius: 3, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingLeft: 15, paddingRight: 15 }}>
                                <Icon name="ios-redo-outline" size={20} color="white" />
                                <Text style={{ color: 'white', marginLeft: 10 }}>转发赚钱</Text>
                            </View>
                        </TouchableOpacity> :
                        <TouchableNativeFeedback>
                            <View style={{ width: 100, height: 40, backgroundColor: 'dodgerblue', borderRadius: 3, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingLeft: 15, paddingRight: 15 }}>
                                <Icon name="ios-redo-outline" size={20} color="white" />
                                <Text style={{ color: 'white', marginLeft: 5 }}>转发赚钱</Text>
                            </View>
                        </TouchableNativeFeedback>
                    }
                </View>
            </View>
        );
    }

    _showTips(msg) {
        // ToastAndroid.show(msg, ToastAndroid.SHORT);
    }

    _renderLoading() {
        return (
            <View style={{ justifyContent: 'center', paddingTop: px2dp(20) }}>
                <ActivityIndicator color={Theme.themeColor} size="large" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    webView: {
        backgroundColor: Theme.pageBackgroundColor,
        width: Theme.width,
        height: Theme.height - 50
    },
    bottom: {
        width: Theme.screenWidth,
        height: px2dp(49),
        backgroundColor: '#fff',
        borderTopWidth: 1 / PixelRatio.get(),
        borderTopColor: '#c4c4c4',
        flexDirection: 'row',
        paddingLeft: px2dp(20),
        paddingRight: px2dp(20),
        alignItems: 'center'
    },
    info: {
        flex: 1,
        flexDirection: 'row-reverse',
        alignItems: 'center',
    }
});